<template>
  <!-- 商品列表组件 -->
  <view class="goods">
    <!-- 左侧选择按钮及图片 -->
    <view class="left-image">
      <radio :checked="item.goods_state" color="#C00000" @click="radioChange" v-if="showRadio"></radio>
      <image class="pic" :src="item.goods_small_logo || defaultPic" @click="goToDetail"></image>
    </view>
    <!-- 右侧商品描述 -->
    <view class="right-descs">
      <view class="goods-name">
        {{item.goods_name}}
      </view>
      <!-- 右侧底部价格及计数器 -->
      <view class="right-bottom">
        <view class="price">
          ￥{{item.goods_price | tofixed}}
        </view>
        <uni-number-box class="number-box" :min="1" :value="item.goods_count" @change="numberChange" v-if="showNum">
        </uni-number-box>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-goods",
    props: {
      item: {
        type: Object,
        default: {}
      },
      showRadio: {
        type: Boolean,
        default: false
      },
      showNum: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 默认图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    filters: {
      // 保留小数点后两位
      tofixed(price) {
        return Number(price).toFixed(2)
      }
    },
    methods: {
      // 选择框改变
      radioChange() {
        this.$emit('radio-change', {
          goods_id: this.item.goods_id,
          goods_state: !this.item.goods_state
        })
      },
      // 计数器值改变
      numberChange(val) {
        console.log(val)
        this.$emit('number-change', {
          goods_id: this.item.goods_id,
          goods_count: Number(val)
        })
      },
      // 前往详情页
      goToDetail() {
        this.$emit('goToDetailHandle')
      }
    }
  }
</script>

<style lang="scss">
  .goods {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;

     // 左侧图片
    .left-image {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 15px;

      .pic {
        display: block;
        width: 100px;
        height: 100px;
      }
    }
    
    // 右侧商品描述
    .right-descs {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      .goods-name {
        font-size: 13px;
      }
       // 右侧底部价格和计数器
      .right-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .price {
          color: #c00000;
          font-size: 16px;
        }

        .number-box {
          margin-right: 5px;
        }
      }
    }
  }
</style>
